<template>
  <div class="goodList" :style="{minHeight:$store.state.minHeight+'rem'}">
    <header>
      <div class="top">
        <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
        <span>商品管理</span>
        <router-link to="/views/Business/addGoods" tag="span" class="add">添加</router-link>
      </div>
      <div class="goodsList">
        <router-link v-for="(x,y) in goodsList" :to="x.page" tag="div" class="goods_box" :key="y" replace>
          <p :class="x.page != present?'selected':''">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="x.page == present"></p>
          </transition>
        </router-link>
      </div>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Switch,Icon,Dialog,Picker } from 'vant';

  export default {
      name: "goodList",
      data() {
        return {
          goodsList: [
            {text: '全部', page: '/components/BusinessComponents/goodsList/all'},
            {text: '出售中', page: '/components/BusinessComponents/goodsList/sale'},
            {text: '未发布', page: '/components/BusinessComponents/goodsList/no'},
            {text: '已下架', page: '/components/BusinessComponents/goodsList/dismount'}
            ],
          present: '/components/BusinessComponents/goodsList/all',
          store_info:{},
        }
      },
    methods: {
      back() {
        this.$router.back();
      },
    },
    mounted() {
      this.present = this.$route.path;
    },
    watch: {
      $route(to, from) {
        this.present = to.path;
      }
    }
  }
</script>

<style scoped>
  .goodList{
    background: #F5F5F5;
    padding-top: .96rem;
  }

  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    flex-flow: row;
    box-sizing: border-box;
  }
  header .top{
    height: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    padding: 0 .1rem;
  }
  header > div > img {
    width: .11rem;
    height: .18rem;
  }

  header > div > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
  }
  header .add{
    font-size: .16rem;
    font-weight: normal;
  }

  /* 拼团分类部分 */
  .goodsList {
    width: 100%;
    height: 100%;
    max-height: .45rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }

  .goods_box {
    height: 100%;
    max-height: .55rem;
    width: calc(100% / 3);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .goods_box > p:nth-child(1) {
    color: #FB4448;
    font-size: .16rem;
    line-height: .16rem;
    padding: .15rem 0 .13rem;
  }

  .goods_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FF300D;
    border-radius: .01rem;
  }


  .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .selected {
    color: #333333 !important;
    font-size: .16rem !important;
  }
</style>
